<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="24" type="flex">
        <el-col :span="10" class="loans-box" :class="notarizeStep==2?'noPad':''">
            <NewCard title="秒贷" :isright="true">
                <template slot="right">
                    <svg-icon icon-class="fx_icon" class="shareBtn" @click="isShowCard=true"/>
                    <ShareBox :thisContentUrl="thisContentUrl" :isShowCard.sync="isShowCard"></ShareBox>
                </template>

                <!-- 认证步骤 -->
                <div class="tabOne">
                    <!-- 1 -->
                    <div
                        class="tablist"
                        :class="[
                        presentStep == 1 ? 'isActive' : '',
                        presentStep > 1 ? 'isOk' : '',
                        ]">
                        <i class="tabNum">1</i>
                        <i class="el-icon-circle-check"></i>
                        <el-button round>选择主体</el-button>
                    </div>
                    <b
                        :class="[
                        presentStep == 1 ? 'isActive' : '',
                        presentStep > 1 ? 'isOk' : '',
                        ]"></b>
                    <!-- 2 -->
                    <div
                        class="tablist"
                        :class="[
                        presentStep == 2 ? 'isActive' : '',
                        presentStep > 2 ? 'isOk' : '',
                        ]">
                        <i class="tabNum">2</i>
                        <i class="el-icon-circle-check"></i>
                        <el-button round>确认需求与资格</el-button>
                    </div>
                    <b
                        :class="[
                        presentStep == 2 ? 'isActive' : '',
                        presentStep > 2 ? 'isOk' : '',
                        ]"></b>
                    <!-- 3 -->
                    <div
                        class="tablist"
                        :class="[
                        presentStep == 3 ? 'isActive' : '',
                        presentStep > 3 ? 'isOk' : '',
                        ]">
                        <i class="tabNum">3</i>
                        <i class="el-icon-circle-check"></i>
                        <el-button round>获取方案</el-button>
                    </div>
                </div>

                <!-- -------------------------选择贷款主体------------------------- -->
                <div class="subject-box" v-if="presentStep==1">
                    <!-- 企业和个人的按钮 -->
                    <div class="cirList">
                        <span v-for="(item,index) in mainList" :key="index" :class="index == myTabstatus?'isActive':''" @click="clickMain(index)">
                         {{item.name}}
                        </span>
                    </div>
                    <!-- ----企业 start---------------------- -->
                    <template v-if='myTabstatus==0'>
                        <div class="input-box">
                            <!-- <el-input
                                placeholder="姓名"
                                v-model="inputName"
                                ref="topName"
                                @keyup.enter.native="blurInput"
                                clearable>
                                <i slot="prefix">
                                    <svg-icon icon-class="ss_icon" />
                                </i>
                            </el-input> -->
                            <div  class="selectCity">
                                <i class="el-icon-location-outline"></i>
                                <el-cascader v-model="cityValue"  :options="addressOption"  placeholder="城市" :show-all-levels="false">
                                </el-cascader>
                            </div>
                            <el-input
                                placeholder="公司名称"
                                v-model="keyword"
                                ref="topCompany"
                                @keyup.enter.native="blurInput"
                                clearable>
                                <i slot="prefix">
                                    <svg-icon icon-class="ss_icon" />
                                </i>
                            </el-input>
                        </div>
                        <!-- 未输入 -->
                        <div class="noData-box" v-if="!stateResult">
                            <img src="~@/assets/images/wjg_img@2x.png" alt="">
                            <p>填写公司名称获取贷款方案</p>
                        </div>
                        <!-- 已输入 -->
                        <div class="subjectHaveInput" v-else>
                            <h3><svg-icon icon-class="yh_icon" />{{selectInfo.oper_name?selectInfo.oper_name:'请选择关联企业'}}</h3>
                            <el-table :data="tableList" style="width: 100%" highlight-current-row>
                                <el-table-column label="关联企业">
                                    <template slot-scope="scope">
                                        <p>{{scope.row.name}}</p>
                                    </template>
                                </el-table-column>
                                <el-table-column label="注册资金" width="150">
                                    <template slot-scope="scope">
                                        <p>{{scope.row.reg_capi_desc.replace('元人民币','')}}</p>
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column label="持股比例" width="100">
                                    <template slot-scope="scope">
                                        <p>{{scope.row.shareHolding}}%</p>
                                    </template>
                                </el-table-column> -->
                                <el-table-column label="选择" width="60">
                                    <template slot-scope="scope">
                                        <el-radio v-model="selectRadio" :label="scope.row.eid" @change="getCompanyInfo(scope.row)"></el-radio>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </template>
                    <!-- ----企业 end---------------------- -->
                    <!-- -------------个人start -->
                    <div class="personal"  v-else>
                        <el-form :model="personalForm" label-width="70px" label-position='left'>
                            <el-form-item label="姓名">
                                <el-input v-model.trim="personalForm.userName"  placeholder='请填写姓名'></el-input>
                            </el-form-item>
                            <el-form-item label="身份证">
                                <el-input v-model.trim="personalForm.creditNo" placeholder='请填写身份证号'></el-input>
                            </el-form-item>
                            <el-form-item label="城市">
                                <!-- <el-input v-model.trim="personalForm.cityCode" placeholder='请选择所在城市'></el-input> -->
                                <el-cascader v-model="cityValue"  :options="addressOption" :show-all-levels="false">
                                </el-cascader>
                            </el-form-item>
                         
                        </el-form>
                    </div>
                    <!-- -------------个人end -->
                    <!-- 底部按钮 -->
                    <div class="nextSubBtn">
                        <SubBtn>
                            <template slot="btn">
                                <span class="sharespan" @click="clickHistRul">历史运算结果<i class="el-icon-arrow-right"></i></span>
                                <el-button round class="shareBtn" @click="subjectNext" v-if="selectRadio||myTabstatus==1">下一步</el-button>
                            </template>
                        </SubBtn>
                    </div>
                    <!-- 底部按钮 -->
                </div>

                <!-- -------------------------确认需求与资格------------------------- -->
                <div class="notarize-box" v-else-if="presentStep==2">
                    <div class="notarize-step">
                        <ul>
                            <li :class="[notarizeStep==1?'isStep':'',notarizeStep>1?'isOk':'']">
                                <i class="el-icon-success" v-if="notarizeStep>1"></i>
                                <i v-else></i>
                                <p>填写需求</p>
                            </li>
                            <li :class="[notarizeStep==2?'isStep':'',notarizeStep>2?'isOk':'']">
                                <i class="el-icon-success" v-if="notarizeStep>2"></i>
                                <i v-else></i>
                                <p>确认资格</p>
                            </li>
                            <li :class="[notarizeStep==3?'isStep':'',notarizeStep>3?'isOk':'']">
                                <i class="el-icon-success" v-if="notarizeStep>3"></i>
                                <i v-else></i>
                                <p>押品信息</p>
                            </li>
                        </ul>
                    </div>
                    <!-- 填写需求 -->
                    <div class="stepBox need-box" v-if="notarizeStep==1">
                        <h3>输入需求</h3>
                        <el-form ref="form" :model="needform" label-width="100px" label-position="left">
                            <el-form-item :label="need.name" v-for="need in needsList" :key="need.id">
                                <!-- 输入框的 -->
                                <el-input v-model="need.value" :placeholder="need.description" v-if="need.type=='1'"></el-input>
                                <!-- 选择框的 -->
                                <el-select v-model="need.value" :placeholder="need.description" v-else>
                                    <!-- 是need.field==term要加年 -->
                                    <el-option :label="need.field=='term'?`${cho}年`:`${cho}`" :value="cho" v-for="(cho,index) in need.choose" :key="index"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                    <!-- 确认资格 -->
                    <div class="stepBox qualif-box" v-else-if="notarizeStep==2">
                        <h3>确认资格</h3>
                        <h4>
                            <span>资格</span>
                            <span>选择</span>
                        </h4>
                        <el-collapse v-model="activeNames">
                            <el-collapse-item :title="con.group || '其他'" :name="`${index}`" v-for="(con,index) in ConfirmQuaList" :key="con.group+index">
                                <ul>
                                    <li v-for="(con,index) in con.children" :key="index">
                                        <p>{{con.name}}</p>
                                        <el-checkbox v-model="con.checked"></el-checkbox>
                                    </li>
                                </ul>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                    <!-- 押品信息 -->
                    <div class="stepBox collateral-box" v-else-if="notarizeStep==3">
                        <h3>押品信息</h3>
                        <el-table :data="collateralList" style="width: 100%">
                            <el-table-column width="40">
                                <template slot-scope="scope">
                                    <i class="el-icon-remove" @click="removeList(scope.$index)"></i>
                                </template>
                            </el-table-column>
                            <el-table-column label="类型" width="80">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.type" @change="changeType(scope)">
                                        <el-option :label="type.name" :value="type.type" v-for="(type,index) in collateralTypeIdLis" :key="index"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="名称" width="70">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.name" @change="changeName(scope)">
                                        <el-option :label="name.name" :value="name.name" v-for="(name,index) in collateralNameLis" :key="index"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="单位" width="50">
                                <template slot-scope="scope">
                                    <!-- <p>{{getUnit(scope.row)}}</p> -->
                                    <p>{{scope.row.unit?scope.row.unit:'--'}}</p>
                                </template>
                            </el-table-column>
                            <el-table-column label="估计(万元)" width="80">
                                <template slot-scope="scope">
                                    <el-input v-model.number="scope.row.price" placeholder="请输入"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="其他">
                                <template slot-scope="scope">
                                    <el-input  autosize type="textarea" v-model="scope.row.address" :placeholder="scope.row.addressExplain?scope.row.addressExplain:'请输入说明'"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="说明">
                                <template slot-scope="scope">
                                    <el-input  autosize type="textarea" v-model="scope.row.description" :placeholder="scope.row.explain?scope.row.explain:'请输入说明'"></el-input>
                                </template>
                            </el-table-column>
                        </el-table>
                        <p class="collateralAdd">
                            <svg-icon icon-class="add-icon" @click="addcollateral" />
                        </p>
                    </div>
                    <!-- 底部按钮 -->
                    <div class="nextSubBtn">
                        <SubBtn>
                            <template slot="btn">
                                <span class="sharespan" @click="clickHistRul">历史运算结果<i class="el-icon-arrow-right"></i></span>
                                <el-button round class="shareBtn" @click="needNext" v-if="notarizeStep==1">填写下一项</el-button>
                                <el-button round class="shareBtn" @click="qualifNext" v-else-if="notarizeStep==2">填写下一项</el-button>
                                <el-button round class="shareBtn" @click="collateralNext" v-else-if="notarizeStep==3">运算</el-button>
                            </template>
                        </SubBtn>
                    </div>
                    <!-- 底部按钮 -->
                </div>

                <!-- -------------------------获取参考结果------------------------- -->
                <div class="result-box" v-else-if="presentStep==3">
                    <div class="progressBar">
                        <el-progress
                            type="circle"
                            :percentage="progressNum"
                            :stroke-width="14"
                            color="#BBBAC2">
                        </el-progress>
                        <!-- 在点击运算的时候，已将个人的信息赋值给selectInfo了 -->
                        <p>{{selectInfo.companyName||selectInfo.userName}}</p>
                        <span v-if="progressNum == 100">结果运算完成</span>
                        <span v-else>运算中</span>
                        <el-button type="primary" round class="againOne" v-if="progressNum == 100" @click="clickAgain">再运算一份</el-button>
                        <span class="viewResults" @click="clickHistRul" v-if="progressNum == 100">查看历史运算结果</span>
                    </div>
                </div>

                <!-- 历史运算结果 -->
                <div class="historicalResult" v-show="historicalResultShow">
                    <h3>运算记录({{historList.length}})</h3>
                    <ul>
                        <li v-for="histor in historList" :key="histor.id" @click="clickResList(histor)">
                            <p>{{histor.companyName||histor.userName}}</p>
                            <span>{{histor.createTime.substring(0,10)}} <i class="el-icon-arrow-right"></i></span>
                        </li>
                    </ul>
                </div>
            </NewCard>
        </el-col>
        <el-col :span="14">
            <!-- 运算结果 -->
            <Results v-if="resultsShow" :resultsData="resultsData" :selectInfo="selectInfo" :loanUserId="loanUserId" ></Results>
            <!-- 推荐内容 -->
            <FeaturedContent v-else></FeaturedContent>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/components/subBtn/subBtn.vue";
import FeaturedContent from "@/components/FeaturedContent/index.vue";
import Results from "./results.vue"
import Address from '@/utils/address.js'

// 分享的组件
import ShareBox from "@/components/shareBox/index.vue"

import { getLoanUserFindCompanyApi,addLoanUserApi,getLoanNeedsListApi,editLoanUserApi,getLoanConditionListApi,editLoanUserConditionApi,getCollateralTypeListApi,addListToolCollateralApi,loanUserFindLoanApi,getLoanUserListApi,getCollateralFindMaxCollateralApi } from "@/BMViews/api/tool/loanUser.js"

import {isNumber,switchTree} from "@/wss/utils/wss.js"

export default {
    name: "Loans",
    components:{
        NewCard,
        FeaturedContent,
        SubBtn,
        Results,
        ShareBox
    },
    data(){
        return{
            addressOption:Address,//省市
            isShowCard: false,//分享按钮的显示隐藏
            thisContentUrl: '',//分享的链接

            presentStep: 1,//当前的步骤 1选择贷款主体 2确认需求与资格 3获取参考结果
            historicalResultShow: false,// 悬浮历史运算结果显示隐藏
            historList:[],//历史运算结果的列表

            // 选择贷款主体*****************
            keyword:'',//姓名或者公司名称
            inputName:'',//输入的名称
            inputCompany: '',//输入的公司名称
            stateResult: false,//当前输入的身份证是否正确
            tableList:[],// 关联企业信息
            selectRadio:'',//选择的关联企业id
            //当前选择的企业信息
            selectInfo:{},
            loanUserId:'', //贷款用户企业id
            // 个人
            mainList:[
                {name:'企业'},
                {name:'个人'},
            ],
            myTabstatus:0,//企业或个人的状态 0是企业 1是个人
            // 个人的表单
            personalForm:{
                userName:'',//个人姓名
                creditNo:'',//个人身份证号
                cityCode:'',//城市
                type:'2',//个人的类型
            },
            cityValue:[],//城市编码

            // 确认需求与资格****************
            activeNames:[],//资格展开的列表
            notarizeStep: 1,//1填写需求 2确认资格 3押品信息
            needsList: [],//贷款需求列表
            // 填写需求
            needform: {
                loanAmount: null,//贷款金额
                deadline: '',//贷款期限
                numDays: null,//等待天数
            },
            ConfirmQuaList:[],// 确认资格信息

            // 获取的所有押品信息
            allCollateralList:[],
            collateralTypeIdLis:[],//所选的押品类型
            collateralNameLis:[],//所选的押品名称
            // 押品信息
            collateralList: [{
                type:'',//类型
                typeId:'',//当前过滤出来的押品id
                name:'',//名称
                unit:'',//单位
                price: null,//预估金额
                address:'',//地址
                description:'',//说明
                addressExplain:'',//地址的占位符
                explain:'',//说明占位符
            }],

            // 获取参考结果****************
            timer:'',//定时器
            progressNum: 0,// 进度条
            resultsShow: false,//运算结果的显示隐藏
            resultsData:[],// 运算的结果数据
        }
    },
    mounted(){
        this.getShareLink()// 获取当前项目的分享链接

        this.getLoanUserList()// 历史运算结果的接口
        this.getLoanNeedsList() // 获取贷款需求(临时)

        // 点击其他位置隐藏悬浮历史运算结果
        document.addEventListener("click", (e) => {
            let thisClassName = e.target.className;
            if (thisClassName != 'historicalResult' && thisClassName != 'sharespan' && thisClassName != 'viewResults') {
                this.historicalResultShow = false; //点击其他区域关闭
            }
        });
    },
    created(){
        this.getlocation();
    },
    watch:{
        '$store.state.user.address':{
             handler(){
                if(this.$store.state.user.address.city){
                    this.getlocation();
                }
            }
        }
    },
    methods:{
        // 定位
        getlocation(){
            // 有市的定位
            let r= this.$store.state.user.address
            if(r.city){ 
            this.cityValue=[]
            // 找到省
            let province=this.addressOption.find(v=>v.label==r.province)
            this.cityValue.push(province.value)
            // 找到市
            let city=province.children.find(v=>v.label==r.city)
            this.cityValue.push(city.value)
            }
        },
        // 点击了企业或个人tab栏
        clickMain(index){
            this.myTabstatus=index
            // 清空输入框
            this.personalForm={
                userName:'',//个人姓名
                creditNo:'',//个人身份证号
                cityCode:'',//城市
                type:'2',//个人的类型
            },
             this.selectInfo = {},//清空公司信息
            this.cityValue=[],//城市编码
            this.keyword=''
            this.stateResult=false  // 默认展示上='滑查看历史运算记录
            this.selectRadio=''// 关联企业清空
            // 调用百度地址
             this.getlocation();
        },

        // 获取当前项目的分享链接
        getShareLink(){
            let href = window.location.host //获取当前域名 不带http://
            let route = this.$route.fullPath
            this.thisContentUrl = `http://${href}${route}`
        },

        //点击历史运算结果
        clickHistRul(){
            this.getLoanUserList()
            this.historicalResultShow = true //显示悬浮历史运算结果
        },
        // 点击历史运算结果某一条
        clickResList(histor){
            console.log('histor',histor);
            this.selectInfo = histor
            this.loanUserFindLoan(histor.id)
            // this.resultsShow = true //运算结果的显示隐藏
        },

        // 历史运算结果的接口
        async getLoanUserList(){
            let create_by = this.$store.state.user.userId
            let result = await getLoanUserListApi(create_by)
            if(result.code==200){
                this.historList = result.rows
            }
        },

        // ***************************选择贷款主体***************************
        // 输入框失去焦点 (现在是按回车)
        async blurInput(){
            this.selectInfo = {}
            // 身份证正则
            // let reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            if(this.cityValue.length==0){
                 this.$message({type:'warning', message:'请选择城市！'})
                 return
            }
            if(!this.keyword){
                this.$message({type:'warning', message:'请输入公司名称！'})
            }else{
                await this.getLoanUserFindCompany()
                // 获取公司信息
                this.stateResult = true
            }
        },

        // 获取关联的企业
        async getLoanUserFindCompany(){
            // userName: this.inputName,
            // company: this.inputCompany
            // 找到省
            let province=this.addressOption.find(v=>v.value==this.cityValue[0])
            // 找到市
            let city=province.children.find(v=>v.value==this.cityValue[1])
            console.log('city:', city)
            let cityName = city.label.replace('市','')
            let params = {
                keyword: cityName+this.keyword
            }
            let result = await getLoanUserFindCompanyApi(params)
            if(result.code==200){
                this.tableList = result.rows
            }
        },

        // 选择的时候获取公司名称
        getCompanyInfo(row){
            this.selectInfo = row
        },

        // 选择贷款主体点击下一步
        async subjectNext(){
            // 企业
            if(this.myTabstatus==0){
                if(this.selectRadio == ''){
                this.$message({type:'warning',message:'请选择关联企业！'})
                }else{
                    // 根据id获取对应的数据
                    let selectInfo = this.tableList.find(item=>{
                        return item.eid == this.selectRadio
                    })
                    this.selectInfo.companyName = selectInfo.name
                    this.selectInfo.creditNo = selectInfo.credit_no
                    this.selectInfo.regNo = selectInfo.reg_no
                    this.selectInfo.userName = selectInfo.oper_name
                    this.selectInfo.type = '1'//企业的type为1

                    await this.addLoanUser() // 添加一个贷款信息
                    await this.getLoanNeedsList() // 获取贷款需求
                    // 显示确认需求与资格
                    this.presentStep = 2
                }
            }else{
                   // 是个人
  
                if(this.personalForm.userName==''||this.personalForm.creditNo==''){
                    this.$message({type: 'warning',message:'请填写完整！'})
                    return 
                }
                if(this.cityValue.length==0){
                     this.$message({type: 'warning',message:'请选择城市'})
                     return 
                }
                let reg=/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
                if(!reg.test(this.personalForm.creditNo)){
                    this.$message({type: 'warning',message:'请填写正确的身份证号'})
                    return 
                }
                // 城市编码的市区码
                this.personalForm.cityCode=this.cityValue[1]
                console.log('this.personalForm',this.personalForm);
                
                await this.addLoanUserPersonal()//添加一个个人的贷款信息
                await this.getLoanNeedsList() // 获取贷款需求
                // 显示确认需求与资格
                this.presentStep = 2

            }
            
        },

        // 添加一个企业贷款信息
        async addLoanUser(){
            let result = await addLoanUserApi(this.selectInfo)
            if(result.code == 200){
                this.loanUserId = result.loanUserId
            }
        },
            // 添加一个个人的贷款信息
        async addLoanUserPersonal(){
            const res= await addLoanUserApi(this.personalForm)
            if(res.code==200){
                this.loanUserId = res.loanUserId
            }
        },
        // ***************************选择贷款主体***************************end

        // ***************************确认需求与资格***************************
        // 获取贷款需求列表
        async getLoanNeedsList(){
            let result = await getLoanNeedsListApi()
            if(result.code==200){
                this.needsList = result.rows
                // 如果有选择框的数据type=2，处理一下选择框的数据chooseList
                this.needsList.forEach(item=>{
                    if(item.type=='2'){
                       item.choose = item.chooseList.split(',')
                    }
                })
            }
        },

        // 获取贷款资格列表
        async getLoanConditionList(){
            // 企业的type='1' 个人的type='2'
            let type=this.myTabstatus==0?'1':'2'
         
            let result = await getLoanConditionListApi(type)
            if(result.code==200){
                this.ConfirmQuaList = switchTree(result.rows)
                this.ConfirmQuaList.forEach((item,i)=>{
                    this.activeNames.push(`${i}`)
                })
            }
        },

        //填写需求点击下一项
        async needNext(){
            // 判断是否有地方没填的
            for (let i = 0; i < this.needsList.length; i++) {
                // 判断完整性
                if(!this.needsList[i].value){
                    this.$message({type: 'warning',message:'请填写完整！'})
                    return
                }
                // 判断贷款额和等待天数是否输入的是数字
                if(this.needsList[i].field == "amount" || this.needsList[i].field == "closingDays"){
                    if(!isNumber(this.needsList[i].value)){
                        this.$message({type: 'warning',message:'贷款额或者等待天数需要填写数字'})
                        return
                    }
                }
            }

            let data = {
                id: this.loanUserId,
            }
            let needsListArr=JSON.parse(JSON.stringify(this.needsList))
            // 循环添加字段名称和值
            needsListArr.forEach(item=>{
                if(item.field == 'amount'){
                    item.value = item.value * 10000
                }
                this.$set(data,item.field,item.value)
            })
            console.log('data',data);
            await this.editLoanUser(data) //修改贷款需求
            await this.getLoanConditionList() // 获取贷款资格列表
            this.notarizeStep = 2
        },

        // 修改贷款用户的信息
        async editLoanUser(data){
            let result = await editLoanUserApi(data)
            if(result.code!=200) return
        },

        // 确认资格点击下一项
        async qualifNext(){
            // 获取所选的条件集合码
            let conditionIds = []
            this.ConfirmQuaList.forEach(item=>{
                if(item.children.length){
                    item.children.forEach(c=>{
                        if(c.checked){
                            conditionIds.push(c.id)
                        }
                    })
                }
            })
            // 如果没有选择条件就点下一步的话不能接着走下去
            if(conditionIds.length<1){
                this.$message({type:"warning",message:"请选择资格！"})
                return
            }
            // 整理修改用户符合的条件所需要的数据
            let data = {
                loanUserId: this.loanUserId,
                conditionIds: conditionIds.join(',')
            }
            await this.editLoanUserCondition(data) // 修改用户符合的条件
            await this.getCollateralTypeList() // 获取押品信息的列表
            this.getCollateralList() // 获取当前用户历史押品信息
            this.notarizeStep = 3

            // 弹出提示框
            // this.$notify({
            //     title: '提示',
            //     message: '建议同时填写银行流水等信用类型，以便获得更多参考方案',
            //     duration: 0
            // });
        },

        // 修改用户符合的条件
        async editLoanUserCondition(data){
            let result = await editLoanUserConditionApi(data)
            if(result.code!=200) return
        },

        // 获取当前用户历史押品信息
        async getCollateralList(){
            let create_by = this.$store.state.user.userId
            let result = await getCollateralFindMaxCollateralApi()
            if(result.code==200){
                if(result.rows.length<1) return
                this.collateralList = []
                // 回显历史押品信息
                result.rows.forEach(item=>{
                    let collateral = this.allCollateralList.find(a=>{
                        return a.id == item.typeId
                    })
                    let data = {
                        id: item.id, //id
                        address: item.address, //处所
                        addressExplain:collateral.address,//处所的占位符
                        description: item.description, //说明占位符
                        explain: collateral.description, //说明
                        name: collateral.name, //名称
                        price: item.price / 10000, //估计(万元)
                        type: collateral.type, //类型
                        typeId: item.typeId, //当前类型的id
                        unit: collateral.unit, //单位
                    }
                    this.collateralList.push(data) //添加进去
                })
            }
        },

        // 获取押品信息的列表
        async getCollateralTypeList(){
            let result = await getCollateralTypeListApi()
            if(result.code==200){
                this.allCollateralList = result.rows
                // 过滤出押品类型列表
                let typeList = []
                result.rows.forEach(item=>{
                    if(item.type=='1'){
                        typeList.push({
                            type: item.type,
                            name: '实物资产',
                        })
                    }else if(item.type=='2'){
                        typeList.push({
                            type: item.type,
                            name: '信用类型',
                        })
                    }else if(item.type=='3'){
                        typeList.push({
                            type: item.type,
                            name: '金融资产',
                        })
                    }else{
                        typeList.push({
                            type: item.type,
                            name: '特殊许可',
                        })
                    }
                })
                // 数组对象去重
                let obj = {};
                let newtypeList = typeList.reduce((cur,next) => {
                    obj[next.type] ? "" : obj[next.type] = true && cur.push(next);
                    return cur;
                },[])
                this.collateralTypeIdLis = newtypeList
            }
        },

        // 选择押品的类型
        changeType({$index,row}){
            // 切换的时候清空名称和单位
            this.collateralList[$index].unit = ''
            this.collateralList[$index].name = ''
            this.collateralList[$index].typeId = ''

            let nameList = []
            // 把选择类型对应的押品名称过滤出来
            this.allCollateralList.forEach(item=>{
                if(item.type == row.type){
                    nameList.push(item)
                }
            })
            this.collateralNameLis = nameList
        },

        // 选择押品的名称拿到单位
        changeName({$index,row}){
            // 获取到当前选中的那个押品信息
            let obj = this.collateralNameLis.find(item=>{
                return item.name == row.name
            })
            // 赋值单位
            this.collateralList[$index].unit = obj.unit
            // 赋值typeId
            this.collateralList[$index].typeId = obj.id
            // 赋值说明占位符
            this.collateralList[$index].explain = obj.description
            // 赋值地址占位符
            this.collateralList[$index]. addressExplain = obj.address
        },

        // 获取押品信息的单位
        getUnit(row){
            if(row.type=='住宅' || row.type=='商铺'){
                row.unit = '所'
                return '所'
            }else if(row.type=='机器'){
                row.unit = '台'
                return '台'
            }else{
                return '--'
            }
        },

        //删除一条押品信息
        removeList(index){
            //根据下标把数据里面的一条数据删掉
            this.collateralList.splice(index,1)
        },

        //添加一条押品信息
        addcollateral(){
            this.collateralList.push({
                id: '',
                type:'',//类型
                typeId:'',//当前过滤出来的押品id
                name:'',//名称
                unit:'',//单位
                price: null,//预估金额
                address:'',//地址
                description:'',//说明
                explain:'',//说明占位符
            })
        },

        // 添加贷款押品的接口
        async addListToolCollateral(){
             let data =JSON.parse(JSON.stringify(this.collateralList))
            // 循环添加loanUserId
            data.forEach(item=>{
                item.loanUserId = this.loanUserId
                item.price = item.price * 10000
            })
            let result = await addListToolCollateralApi(data)
            if(result.code!=200) return
        },

        //点击运算按钮
        async collateralNext(){
            // 判断是否填写完整
            for (let i = 0; i < this.collateralList.length; i++) {
                if(this.collateralList[i].type=='' || this.collateralList[i].name=='' || this.collateralList[i].price==null || this.collateralList[i].address==''){
                    this.$message({type: 'warning',message:'请填写完整！'})
                    return
                }
            }
            await this.addListToolCollateral() // 添加贷款押品的接口
            this.presentStep = 3 //显示3获取参考结果
            // 如果是个人就在运算的时候把个人信息赋值
            if(this.myTabstatus==1){
                this.selectInfo=this.personalForm
                console.log('this.personalForm',this.personalForm);
            }
            // 进度条开始
            this.progressNum=0
            this.timer = setInterval(() => {
                this.progressNum++;
                //这里之所以到75%就结束定时器，下面具体解释
                if (this.progressNum == 99) {
                    clearInterval(this.timer);
                    this.timer = null;
                }
            }, 20);
            this.loanUserFindLoan(this.loanUserId) // 运算的接口
        },

        // 运算的接口
        async loanUserFindLoan(loanUserId){
            let result = await loanUserFindLoanApi({loanUserId})
            
            if(result.code==200){
                this.progressNum = 100
                clearInterval(this.timer);
                this.resultsData = result.rows
                this.resultsShow = true //运算结果的显示隐藏
            }
        },

        // ***************************确认需求与资格***************************end

        // ***************************3获取参考结果***************************
        // 点击再次运算
        clickAgain(){
            this.resultsShow=false
            this.presentStep = 1
            this.notarizeStep = 1
        }
        // ***************************3获取参考结果***************************end
        
    },
}
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
.wss-container >>> .el-card__body {
  position: relative;
  padding: 0 30px;
}

.wss-container >>> .el-card__body > div {
  height: calc(100% - 45px);
  overflow-y: auto;
}
.wss-container >>> .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}

.wss-container .noPad >>> .el-card__body {
  padding: 0;
}
.wss-container .noPad >>> .el-card__body .top {
  margin: 0 30px;
}

ul,p,h3,h4 {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd30 {
  padding: 0 30px;
}

/* 分享按钮 */
.loans-box >>> .top{
  position: relative;
}
.shareBtn{
  font-size: 14px;
  color: #999;
  cursor: pointer;
}

/* 一级 */
.tabOne {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #e5e6e9;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 26px 0;
  margin-top: 15px;
}

.noPad .tabOne{
    margin: 0 30px;
}
.tabOne .tablist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tabOne .tablist .tabNum {
  font-style: normal;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  border: 2px solid #c8cce2;
  border-radius: 50%;
  color: #c8cce2;
}
.tabOne .tablist .el-icon-circle-check {
  display: none;
  font-size: 30px;
  color: #c8cce2;
}
.tabOne .tablist.isActive .tabNum {
  border-color: #6A769F;
  background-color: #6A769F;
  color: #fff;
}
.tabOne .tablist.isOk .tabNum {
  display: none;
}
.tabOne .tablist.isOk .el-icon-circle-check {
  display: block;
}

.tabOne .tablist button {
  color: #9c9da6;
  font-size: 14px;
  background-color: transparent;
  border: 2px solid #c8cce2;
  padding: 6px 20px;
  margin-top: 25px;
}
.tabOne .tablist::before {
  content: "";
  display: none;
  position: absolute;
  bottom: -26px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #e5e6e9;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne .tablist::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -27px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne > b {
  display: flex;
  align-items: flex-end;
}
.tabOne > b::before,
.tabOne > b::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
  border-right: 0px solid transparent;
  border-left: 6px solid #c8cce2;
  margin-bottom: 15px;
  margin-right: 1px;
}
.tabOne > b.isOk::before,
.tabOne > b.isOk::after,
.tabOne > b.isActive::before,
.tabOne > b.isActive::after {
  border-left-color: #6A769F;
}

.tabOne .tablist.isActive button,
.tabOne .tablist.isOk button,
.tabOne .tablist button:hover {
  color: #fff;
  background-color: #6A769F;
  border-color: #6A769F;
}
.tabOne .tablist.isOk button {
  background-color: #909bb7;
  border-color: #909bb7;
  font-weight: 400;
}
.tabOne .tablist.isActive::before {
  display: block;
}
.tabOne .tablist.isActive::after {
  display: block;
}
@media (max-width: 1430px) {
  .tabOne .tablist button {
    padding: 6px 8px;
  }
}

</style>
<style scoped>
::v-deep .el-textarea__inner {
  resize: none;
  line-height: normal;
  min-height: 28px !important;
  overflow-y: hidden;
  border: 0;
  color:#606266;
  font-family: Microsoft Yahei;
  font-size: 14px;
}
::v-deep .el-textarea{
  /* width: 18%; */
}
/* 选择贷款主体 */
.subject-box{
    margin: 10px 0 80px 0;
}
.input-box{
    display: flex;
    align-items: center;
    font-size: 18px;
    border-radius: 30px;
    height: 50px;
    line-height: 50px;
    border: 2px solid #c4c6ca;
    padding:0 10px;
}

.input-box .el-icon-location-outline{
    color: #c4c6ca;
}
.input-box .selectCity{
    display: flex;
    align-items: center;
}
.input-box .selectCity ::v-deep .el-input--medium .el-input__inner {
    padding: 5px;
}
.input-box .selectCity .el-cascader ::v-deep .el-input{
    width: 80px;
}
.input-box .selectCity ::v-deep .el-cascader .el-input .el-icon-arrow-down{
   display: none;
}
.input-box ::v-deep .el-input--medium .el-input__inner {
    border: none;
}

/* 输入身份证号码获取贷款方案 */
.noData-box{
    text-align: center;
    margin-top: 50px;
}
.noData-box img{
    width: 30%;
}
.noData-box>p{
    font-size: 12px;
    font-weight: 400;
    color: #858A91;
    margin-top: 30px;
}

/* 已输入的状态 */
.subjectHaveInput h3{
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 600;
    color: #39486F;
    padding: 30px 0;
}
.subjectHaveInput h3>svg{
    font-size: 30px;
    margin-right: 10px;
}

/* 表格样式 */
::v-deep .el-table::before{
    height: 0;
}
::v-deep .el-table .el-table__header-wrapper th{
  background-color: #fff;
}
::v-deep .el-table th.is-leaf{
  border-top: 1px solid #EFEFEF;
  border-bottom: 1px solid #EFEFEF;
}
::v-deep .el-table th > .cell{
  font-size: 12px;
  color: #909AAA;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p{
  margin: 0;
  font-size: 14px;
  color: #2E3F5E;
}
::v-deep .el-table .cell .el-button{
  color: #F87A23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before{
  content: "\E791";
}
::v-deep .el-table td{
  /* border-bottom: 0; */
}
::v-deep .el-table td .islight{
  color: #F87A23;
  cursor: pointer;
}
::v-deep .el-table .el-table__expanded-cell[class*=cell]{
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before{
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf{
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td{
  border-bottom: 0;
}
/* 表格样式 end */
/* 单选框 */
::v-deep .el-radio__label {
  display: none;
}
::v-deep .el-radio .el-radio__inner {
  width: 24px;
  height: 24px;
  border-color: #bbbbbb;
  background: #fff;
}
::v-deep .el-radio .is-disabled .el-radio__inner {
  background: #f2f2f2;
}
::v-deep .el-radio .is-checked .el-radio__inner {
  border-color: #f87a23;
  background: #f87a23;
}
::v-deep .el-radio__input.is-checked .el-radio__inner::after {
  content: "";
  width: 12px;
  height: 8px;
  border: 3px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  vertical-align: middle;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}
</style>
<style scoped>
/* 确认需求与资格 */
::v-deep .notarize-box .el-collapse-item__header,
::v-deep .notarize-box .el-collapse-item__header.focusing {
  font-size: 14px;
  color: #2e3f5e;
  padding: 15px 30px;
  border-bottom: 1px solid #ebeef5;
  background-color: #f9f9f9;
}
::v-deep .notarize-box .el-collapse-item__content {
  padding-bottom: 0;
}

.notarize-box{
    margin-bottom: 100px;
}
.notarize-step{
    margin-top: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #EFEFEF;
}
.notarize-step ul{
    display: flex;
    justify-content: space-between;
}
.notarize-step ul>li{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33%;
}
.notarize-step ul>li>i{
    display: block;
    width: 14px;
    height: 14px;
    background-color: #ABB0BC;
    border: 4px solid #fff;
    border-radius: 50%;
    margin-right: 12px;
}
.notarize-step ul>li.isStep{
    color: #F87A23;
}
.notarize-step ul>li.isStep>i{
    background-color: #F87A23;
    border-color: #ffdbc1;
}

.notarize-step ul>li.isOk{
    color: #08C160;
}
.notarize-step ul>li.isOk>i{
    border: 0;
    color: #08C160;
    background-color:transparent;
}

.stepBox{
    margin-top: 20px;
}
.stepBox h3{
    font-size: 16px;
    color: #2E3F5E;
    margin-bottom: 20px;
}
.noPad .stepBox h3{
    padding: 0 30px;
}

::v-deep .need-box .el-form-item__label{
    color: #2E3F5E;
}
::v-deep .need-box .el-select{
    width: 100%;
}

.qualif-box h4{
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: #909AAA;
    border-bottom: 1px solid #F5F7FA;
    padding-bottom: 15px;
}
.noPad .qualif-box h4{
    padding: 0 30px;
    padding-bottom: 15px;
}
.qualif-box ul>li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #F5F7FA;
    font-size: 13px;
    font-weight: 400;
    color: #2E3F5E;
}
.noPad .qualif-box ul>li{
    padding: 15px 30px;
}
.qualif-box ul>li:last-child{
    border-bottom: 0;
}
::v-deep .qualif-box .el-checkbox__input.is-checked .el-checkbox__inner{
    background-color: #F87A23;
    border-color: #F87A23;
}

::v-deep .collateral-box .el-input__inner{
    border: 0;
    padding: 0;
    background-color: transparent;
}
::v-deep .collateral-box .el-input__suffix{
    display: none;
}
.collateral-box .el-icon-remove{
    color: #909AAA;
    font-size: 14px;
    cursor: pointer;
}

.collateralAdd{
    margin: 15px 0;
}
.collateralAdd>svg{
    cursor: pointer;
    color: #909AAA;
}
</style>
<style scoped>
/* 3获取参考结果 */
.progressBar {
  text-align: center;
  margin: 50px 0;
}
::v-deep .progressBar .el-progress .el-progress__text {
  color: #f87a23;
}
.progressBar p {
  font-weight: bold;
  font-size: 18px;
  color: #333;
  margin: 0;
  margin-top: 50px;
  margin-bottom: 15px;
}
.progressBar span {
  font-size: 12px;
  color: #bababa;
}
/* 审核完成 */
.progressBar .el-button.againOne {
  display: block;
  margin: 0 auto;
  margin-top: 30px;
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 50px;
}
.progressBar .viewResults{
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    margin: 0;
    margin-top: 10px;
    cursor: pointer;
}
</style>
<style scoped>
/* 历史运算结果 */
.historicalResult{
    position: absolute;
    left: 15px;
    bottom: 60px;
    padding: 20px;
    width: calc(100% - 30px);
    background: #FFFFFF;
    box-shadow: 0px 2px 6px 2px rgba(228, 228, 228, 0.5);
    border: 1px solid #ECEDF0;
}
.historicalResult h3{
    font-size: 12px;
    /* font-weight: 600; */
    color: #9AA3B2;
}
.historicalResult ul{
    max-height: 100px;
    overflow-y: auto;
}
.historicalResult ul>li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    margin-top: 15px;
    cursor: pointer;
}
.historicalResult ul>li>span{
    font-size: 12px;
    color: #999999;
}
</style>
<style scoped>
/* 底部按钮 */
::v-deep .nextSubBtn .subBtn{
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
}
::v-deep .nextSubBtn .subBtn>p{
    line-height: 36px;
    font-size: 14px;
    font-weight: 600;
    color: #999999;
    cursor: pointer;
}
::v-deep .statusBox .nextSubBtn .subBtn{
    justify-content: space-between;
    align-items: center;
}
.nextSubBtn .sharespan{
    font-size: 12px;
    font-weight: 400;
    padding: 10px 0;
    color: #39486F;
    cursor: pointer;
}
.nextSubBtn .shareBtn{
    color: #fff!important;
    border-color: #f87a23;
    background-color: #f87a23;
}
</style>
<style lang='scss' scoped>
/* 圆角tab栏样式 */
	.cirList {
		display: flex;
		justify-content: space-around;
		background-color: #eef0f2;
		margin-bottom: 10px;
		padding: 3px;
		font-size: 14px;
		color: #000000;
		border-radius: 30px;
        height: 50px;
        line-height: 50px;

		span {
         position: relative;
			// width: 33%;
            flex: 1;
			text-align: center;
		}

		.isActive {
			color: #F67725;
			background-color: #fff;
			border-radius: 30px;
		}
	}
    .subject-box{
        .personal{
            margin-top:20px ;  
        }
        ::v-deep .el-cascader--medium {
            width: 100%;

        }
        
    }
    ::v-deep .personal .el-form-item__label{
      color: #2E3F5E;
    }
    

</style>